<template>
	<custom-page-select-layout>
		<template #header>
			<view class="search-wrapper" slot="header">
				<fui-search-bar paddingTb="0" searchText="" paddingLr="0" radius="16" height="80"
					inputBackground="#F3F3F3" isLeft :cancel="false" @clear="onClear"
					@input="onChangeKeywords"></fui-search-bar>

				<custom-select-page-path-nav @pathItem="onPathItem" @all="onAll"
					:pathData="pathData"></custom-select-page-path-nav>

			</view>

		</template>
		<template #body>

			<template v-if="multiple">
				<fui-checkbox-group :key="key">
					<fui-row v-for="(item,index) in viewListData" :key="index" class="cell  border">
						<fui-col :span="22" class="cell-left">
							<fui-label>
								<fui-checkbox @change="setCheckedValue_CheckBox" :value="item.value"
									:checked="checkedValue.includes(item.value)"></fui-checkbox>
								<fui-text :text="item.label" class="text"></fui-text>
							</fui-label>
						</fui-col>
						<fui-col :span="2" class="cell-right" v-if="item.children && item.children.length">
							<fui-icon name="arrowright" color="rgba(0,0,0,0.4)" size="48"
								@click="onNextIcon(item)"></fui-icon>
						</fui-col>
					</fui-row>

				</fui-checkbox-group>
			</template>

			<template v-else>
				<fui-radio-group :key="key">
					<fui-row v-for="(item,index) in viewListData" :key="index" class="cell  border">
						<fui-col :span="22" class="cell-left">
							<fui-label>
								<fui-radio @change="changeRadio($event,item)" :value="item.value"
									:checked="checkedValue.includes(item.value)"></fui-radio>
								<fui-text :text="item.label" class="text"></fui-text>
							</fui-label>
						</fui-col>
						<fui-col :span="2" class="cell-right" v-if="item.children && item.children.length">
							<fui-icon name="arrowright" color="rgba(0,0,0,0.4)" size="48"
								@click="onNextIcon(item)"></fui-icon>
						</fui-col>
					</fui-row>

				</fui-radio-group>
			</template>



		</template>
		<template #footer>
			<view class="footer">
				<template v-if="multiple">
					<custom-select-page-selected-multiple @selectAll="onSelectAll" :value="selectedTypeValue"
						@expand="visible=true">
					</custom-select-page-selected-multiple>
					<custom-select-page-selected-multiple-popup-data :data="checkedValue" :visible="visible"
						@close="visible=false" @remove="onRemovePopupListData">
					</custom-select-page-selected-multiple-popup-data>
				</template>
				<template v-else>
					<custom-select-page-selected :value="currentValueLabel"></custom-select-page-selected>

				</template>


				<fui-row class="button-wrapper" :gutter="16">
					<fui-col :span="6">
						<fui-button background="#F2F3FF" color="#0052D9" @click="onCancel">
							取消
						</fui-button>
					</fui-col>
					<fui-col :span="18">
						<fui-button @click="onConfirm">
							确认
						</fui-button>
					</fui-col>
				</fui-row>
			</view>
		</template>
	</custom-page-select-layout>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapGetters
	} from 'pinia'
	import {
		defineComponent
	} from 'vue'
	import {
		useDeptStore
	} from '../../store/modules/dept.js'
	import {
		deptAndGroupAndUserToRewrite,
		deptAndTeamToRewrite,
		deptRewrite
	} from '../../utils/handleDeptData.js'

	import _ from 'lodash'
	import {
		convertToTree,
		DeptSelectChoseType
	} from '../../utils/util.js'
	import {
		useSyStemStore
	} from '../../store/modules/system.js'

	export default defineComponent({

		computed: {
			...mapState(useDeptStore, ['viewListData', 'key', 'pathData']),
			...mapState(useSyStemStore, ['deptTeamUserList', 'deptList']),
			...mapGetters(useDeptStore, ['checkedValue', 'selectedTypeValue', 'currentValueLabel']),
		},

		data() {
			return {
				currentValuePath: '',
				multiple: false,
				storeKey: '',
				backToPath: null,
				visible: false,
			}
		},

		onLoad(options) {
			const is = {
				'false': false,
				'true': true
			}
			this.storeKey = options.storeKey
			this.multiple = is[options.multiple]
			this.backToPath = options.backToPath
			if (options.choseType === DeptSelectChoseType.selectDept) {
				const rewriteSourceData = deptRewrite(this.deptList)
				const treeList = convertToTree(rewriteSourceData, {
					id: 'deptId',
					parentId: 'parentId',
					name: 'deptName'
				})
				this.setInit({
					list: this.deptList,
					rewriteSourceData,
					viewListData: treeList,
					copyViewListData: _.cloneDeep(treeList),
					storeKey: options.storeKey
				})
			} else if (options.choseType === DeptSelectChoseType.selectDeptTeamUser) {
				// 考虑废弃
				const rewriteSourceData = deptAndGroupAndUserToRewrite(this.deptTeamUserList)
				this.setInit({
					list: this.deptTeamUserList,
					rewriteSourceData,
					viewListData: rewriteSourceData,
					copyViewListData: _.cloneDeep(rewriteSourceData)

				})

			} else {
				// 考虑废弃
				// 小组人员选择
				const rewriteSourceData = deptAndTeamToRewrite(this.deptTeamUserList)
				this.setInit({
					list: this.deptTeamUserList,
					rewriteSourceData,
					viewListData: rewriteSourceData,
					copyViewListData: _.cloneDeep(rewriteSourceData)

				})
			}
		},
		methods: {
			// ...mapActions(useDeptStore, ['onRemovePopupListData']),
			...mapActions(useDeptStore, ['setCheckedValue_CheckBox', 'setCheckValue_Radio', 'setPathData',
				'setViewListData',
				'setDeptTeamUserList',
				'onChangeKeywords',
				'onSelectAll',
				'setInit',
				'setStoreKeyValue',
				'onPathItem',
				'onAll',
				'onRemovePopupListData'
			]),
			// onRemove() {
			// 	this.onRemovePopupListData()
			// },
			onCancel() {
				uni.redirectTo({
					url: this.backToPath
				})
			},

			onConfirm() {
				uni.redirectTo({
					url: this.backToPath
				})
			},
			onClear() {
				this.onChangeKeywords({
					detail: {
						value: ''
					}
				})
			},
			// changeCheckBox(val) {
			// 	this.setCheckedValue_CheckBox(val, this.storeKey)
			// },

			changeRadio(val, item) {
				this.setCheckValue_Radio(val.value)
				// this.setStoreKeyValue(val.value, item._name, this.storeKey)
			},

			onNextIcon(item) {
				this.setViewListData(item.children)
				this.setPathData({
					nodeName: item.label,
					value: item.value
				})
			}
		}
	})
</script>

<style lang="scss" scoped>
	.cell {
		// width: 654rpx;
		// height: 112rpx;
		background-color: #fff;
		// box-shadow: 32rpx -1rpx 0 #f1f1f1;

		&-left {
			padding: 32rpx 0 32rpx 16rpx !important;

			&:active {
				background-color: #f1f1f1;
			}

			.text {
				margin-left: 16rpx;
			}
		}

		&-right {
			padding: 32rpx 0;

			&:active {
				background-color: #f2f2f2;
			}
		}

	}

	.border {
		border-bottom: 2rpx solid #f1f1f1;
	}
</style>